<template>
  <div class="paginagtion" v-if="itemCount!=0" >
    <ul style="display:inline-block;width:auto;">
      <!-- <li style="width: 45px;">
        <a  @click="first">首页</a>
      </li> -->
      <li style="width: 54px;" v-show="currentPage > 1">
        <a @click="pre">上一页</a>
      </li>
      <li v-for="(k,i) in 5" v-if="currentPage-2+i>=1 && currentPage-2+i<=pageCount" :key="k.id" :class="{active: i == 2}">
      <a @click="go(currentPage-2+i)">{{currentPage-2+i}}</a>
      </li>
      <li style="width: 54px;" v-show="currentPage<pageCount">
        <a @click="next">下一页</a>
      </li>
      <!-- <li style="width: 75px;" :class="{disabled: currentPage==pageCount}">
        <a @click="last">最后一页</a>
      </li> -->
      <!-- <li style="width: 50px; border-color: transparent" v-show="pageCount>1">
        跳转到
      </li>
      <li v-if="pageCount>1" class="jump-item">
        <input type="text" v-model="pageNo" @keyup.enter="go(pageNo)">
      </li>
      <li v-show="pageCount > 1">
        <a @click="go(pageNo)">GO</a>
      </li>
      <li style="border-color: transparent" class="disabled">
        共<span style="color: #333;margin:0 5px;">{{pageCount}}</span>页
      </li> -->
    </ul>
  </div>
</template>
<script>
/**
 * Created by flyRainbow on 2018/4/16.
 * 实现了一个通用的分页组件
 * 使用方法:
  *      1. 需要父组件传递数据: pageSize和itemCount
  *      2. 父组件要实现方法来响应@gotopage事件, gotopage事件会传递参数: pageNo(页码)
 */
export default {
  data () {
    return {
      pageNo: null,
      currentPage: 1,
      pageCount: Math.ceil(this.itemCount / this.pageSize)
    }
  },
  props: ['pageSize', 'itemCount'],
  watch: {
    itemCount (val, oldVal) {
      this.currentPage = 1
      this.pageCount = Math.ceil(this.itemCount / this.pageSize)
    },
    currentPage (val, oldVal) {
      this.$emit('gotopage', val)
    }
  },
  methods: {
    pre () {
      if (this.currentPage <= 1) {
        return
      }
      --this.currentPage
      this.pageNo = this.currentPage
    },
    next () {
      if (this.currentPage >= this.pageCount) {
        return
      }
      ++this.currentPage
      this.pageNo = this.currentPage
    },
    first () {
      this.currentPage = 1
      this.pageNo = this.currentPage
    },
    last () {
      this.currentPage = this.pageCount
      this.pageNo = this.currentPage
    },
    go (pageNo) {
      if (pageNo <= 0 || pageNo > this.pageCount || pageNo === this.currentPage) {
        return
      }
      this.currentPage = pageNo
      this.pageNo = this.currentPage
    }
  }
}
</script>
<style lang='scss' scoped>
  .paginagtion{
    text-align:center;
    li{
      display: inline-block;
      border-radius: 2px;
      border: 1px solid #e3e3e3;
      margin: 0 2px;
      &:hover{
        border-color: #ff6f3c;
        color: #ff6f3c;
      }
      a{
        display: inline-block;
        min-width: 28px;
        height: 32px;
        line-height: 32px;
      }
      &.active{
        background-color: #ff6f3c;
        border-color: #ff6f3c;
        a{
          color: #fff;
        }
      }
      &.jump-item{
        border: 1px solid transparent;
      }
      input{
        background: none;
        width: 28px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        border: 1px solid #e3e3e3;
      }
    }
  }
</style>
